<template>
  <div class="http-debugger">
    <h2>HTTP 请求调试工具</h2>
    <div class="input-group">
      <label for="reqUrl">请求 URL：</label>
      <input id="reqUrl" v-model="reqUrl" type="text" placeholder="例如：https://api.example.com/data">
    </div>
    <div class="input-group">
      <label for="method">请求方法：</label>
      <select id="method" v-model="method">
        <option>GET</option>
        <option>POST</option>
        <option>PUT</option>
        <option>DELETE</option>
        <option>PATCH</option>
      </select>
    </div>
    <div class="input-group">
      <label for="headers">请求头 (JSON 格式)：</label>
      <textarea id="headers" v-model="headers" rows="3" placeholder='例如：{"Content-Type": "application/json"}'></textarea>
    </div>
    <div class="input-group">
      <label for="body">请求体：</label>
      <textarea id="body" v-model="body" rows="5" placeholder="仅对 POST/PUT/PATCH 方法有效"></textarea>
    </div>
    <button @click="sendRequest">发送请求</button>
    <div v-if="responseData" class="response">
      <h3>响应信息：</h3>
      <p><strong>状态码：</strong>{{ responseStatus }}</p>
      <p><strong>响应头：</strong></p>
      <pre>{{ responseHeaders }}</pre>
      <p><strong>响应体：</strong></p>
      <pre>{{ responseData }}</pre>
    </div>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "HttpDebugger",
  data() {
    return {
      reqUrl: "",
      method: "GET",
      headers: "",
      body: "",
      responseStatus: "",
      responseHeaders: "",
      responseData: "",
      error: ""
    };
  },
  methods: {
    async sendRequest() {
      this.error = "";
      this.responseData = "";
      this.responseHeaders = "";
      this.responseStatus = "";
      let config = {};
      // 尝试解析用户输入的请求头 JSON
      if (this.headers.trim() !== "") {
        try {
          config.headers = JSON.parse(this.headers);
        } catch (e) {
          this.error = "请求头 JSON 格式错误：" + e.message;
          return;
        }
      }
      // 如果请求方法支持请求体，并且用户输入了内容，则解析
      let data = null;
      if (["POST", "PUT", "PATCH"].includes(this.method.toUpperCase()) && this.body.trim() !== "") {
        data = this.body;
      }
      try {
        const response = await axios({
          url: this.reqUrl,
          method: this.method,
          headers: config.headers,
          data: data
        });
        this.responseStatus = response.status;
        this.responseHeaders = JSON.stringify(response.headers, null, 2);
        // 如果响应数据为对象，则格式化为 JSON 字符串
        this.responseData = typeof response.data === "object" ? JSON.stringify(response.data, null, 2) : response.data;
      } catch (err) {
        this.error = "请求错误：" + (err.response ? err.response.statusText : err.message);
      }
    }
  }
};
</script>

<style scoped>
.http-debugger {
  max-width: 600px;
  margin: 20px auto;
  padding: 10px;
}
.input-group {
  margin: 10px 0;
}
.input-group label {
  display: block;
  margin-bottom: 5px;
}
.input-group input,
.input-group select,
.input-group textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #2980b9;
}
.response {
  margin-top: 20px;
  text-align: left;
}
.response pre {
  background: #ecf0f1;
  padding: 10px;
  border-radius: 4px;
  max-height: 300px;
  overflow: auto;
}
.error {
  color: red;
  margin-top: 10px;
}
</style> 